<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>YY网页版聊天系统</title>

		<link rel="stylesheet" href="yy.css" />
	</head>

	<body>

		<div class="box">
			<header>
				<h3 class="uname">聊天头部<h3></header>
		 
				<section>
					<div class="box2">显示聊天信息</div>
					<div class="myform">
						<textarea name="msg" rows="5" cols="30"></textarea>
					<button type="button" class="close">关闭</button>
					<button type="button" class="send">发送</button>
					</div>
				</section>
				<aside>
					<ul class="user">
						<li>张同学</li>
						<li>李同学</li>
						<li>王同学</li>
						<li>赵同学</li>
						<li>韩同学</li>
					</ul>
				</aside>
	 
		</div>
		
	 
	 
<script src="jquery-3.2.1.js"></script>

<script>
/*
 在理解基础记忆
 * */

var zindex = 1;
	$("header").mousedown(function(ev){
		var parent = $(this).parent();
		var dx = ev.clientX - parent.position().left;
		var dy = ev.clientY - parent.position().top;
		$(document).mousemove(function(evt){
			var x = evt.clientX - dx;
			var y = evt.clientY - dy;
			parent.css({left:x,top:y});
		})
	})
 
 	$(document).mouseup(function(){
 		$(document).off("mousemove"); 		
 	})
 	
 	/*事件委托。来克隆*/
 	$(".user").click(function(ev){
 		//阻止冒泡
 		ev.stopPropagation();//克隆出来，向下移动
 		var boxt = $(this).parents(".box").clone(true);
 		boxt.find(".uname").html(ev.target.innerText)
 		boxt.css({left:50,top:100,zIndex:++zindex})
 		boxt.appendTo("body");
 	})
 	
 	//单击哪个让哪个显示在最前面
 	$(".box").click(function(){
 		$(this).css("zIndex",++zindex) 		
 	})
 	
 	
 	//关闭当前聊天窗口
 	$('[class="close"]').click(function(){
 		$(this).parents(".box").fadeOut();
 		
 	})
 	
</script>
	</body>

</html>